<template>
  <div>
      <div>
        <h1>
          <el-row>
            <el-col :span="5">
              <span v-if="dataBanner">修改Banner</span>
              <span v-else>添加Banner</span>
              <el-button class="addBtn" @click="goBack">返回</el-button>
            </el-col>
          </el-row>
        </h1>
       <el-form :model="ruleForm2"  :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm" style="width:70%">
          <el-form-item label="内容" prop="title">
            <el-input v-model="ruleForm2.title" auto-complete="off"></el-input>
          </el-form-item>
          
          <el-form-item label="图片">
            <el-row>
               <el-col :span="16">
                 <el-upload
                  style="display:inline-block"
                  :action="action"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleOK"
                  :data="postData"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
               </el-col>
              <el-col :span="8">
                <img :src="ruleForm2.img_url" v-show="dataBanner" style="width:120px;height:150px;maring-left:50px" />
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="跳转链接" prop="link_url">
            <el-input  v-model="ruleForm2.link_url" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="状态" >
           <el-select v-model="ruleForm2.status">
            <el-option v-for="(item,index) in statuss" :key="index" :label="item.label" :value="item.value"></el-option>
           </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
import Http from '@/Http/Http'
import qnUrl from '@/Http/qiniuUrl'

export default {
  
  data() {
    
    var title = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入内容'));
      } else {
        callback();
      }
    };
    var link_url = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入昵称'));
      } else {
        callback();
      }
    };
    
    return {
      action:qnUrl,//七牛的上传地址
      tokenimgUrl:'',
      ruleForm2: {
        title: '',
        status:1,
        img_url:'',
        link_url:''
      },
      statuss:[
        {label:'上线',value:1},
        {label:'下线',value:0}
      ],
      postData:{
        token:'',
      },
      rules2: {
        title: [
          { validator: title, trigger: 'blur' }
        ],
        link_url: [
          { validator: link_url, trigger: 'blur' }
        ]
      }
    };
  },
  props:['dataBanner'],
  created() {
    Http.QiniuToken({})
    .then( res => {
      
      this.postData.token = res.data.data.uptoken;
      this.tokenimgUrl = res.data.data.domain
    })
    .catch( error => {
      
    })
    if(this.dataBanner){
      this.ruleForm2.title = this.dataBanner.title  
      this.ruleForm2.link_url = this.dataBanner.link_url  
      this.ruleForm2.status = this.dataBanner.status  
      this.ruleForm2.img_url = this.dataBanner.img_url  
 
    }  
    console.dir(this.dataBanner)
  },
  methods:{
    submitForm(formName) {
    
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(!this.ruleForm2.img_url){
            this.$message.error('请添加图片')
            return
          }
          const obj = {
            "title": this.ruleForm2.title,
            "link_url": this.ruleForm2.link_url,
            "status": this.ruleForm2.status,
            "img_url":this.ruleForm2.img_url
          };
          this.dataBanner ? this.editBannerFun(obj) : this.addBannerFun(obj);
        } else {
          return false;
        }
      });
    },
    addBannerFun(obj){
      Http.addBanner(obj)
      .then( res => {
        
        if( res.data.code == 200 ) { 
          this.$message.success('Banner添加成功')
          this.goBack()    
        } else if (res.data.code == -1003) {
          this.$message.error(`请求失败原因：${res.data.message}`)
          setTimeout(()=>{
            this.$router.push('/')
          },2000)
        } else {
          this.$message.error('用户添加失败')              
        }
      })
      .catch( error => {
        this.$message.error('服务器请求失败')
        
      })
    },
    editBannerFun(obj){
      obj.id = this.dataBanner.id;
    
      Http.editBanner(obj)
      .then( res => {
        
        if( res.data.code == 200 ) { 
          this.$message.success('用户修改成功')
          this.goBack()    
        } else if (res.data.code == -1003) {
          this.$message.error(`请求失败原因：${res.data.message}`)
          setTimeout(()=>{
            this.$router.push('/')
          },2000)
        } else {
          this.$message.error('用户修改失败')              
        }
      })
      .catch( error => {
        this.$message.error('服务器请求失败')
        
      })
    },
    goBack(){
      this.$emit('breakFun')
    },
    handleRemove(file, fileList) {
      if(dataBanner){
         this.ruleForm2.img_url = dataBanner.img_url;
      }
      
    },
    handlePictureCardPreview(event, file, fileList) {
    },
    handleOK(responed) {
      this.ruleForm2.img_url = `http://${this.tokenimgUrl}/${responed.key}`
    },
    handleClose(done) {
      this.$refs["ruleForm2"].resetFields();
      this.$emit('showFun')
    }
  }
}
</script>
<style>


</style>